<ion-header>
    <ion-toolbar content-page class="fir-toolbar">
        <ion-buttons start>
            <button ion-button icon-only (click)="backButtonClick($event)" style="background: transparent">
                <i class="toolbar-back"></i>
            </button>
        </ion-buttons>
        <ion-title>
            理赔
        </ion-title>
        <ion-buttons end>
            <button ion-button icon-only adpmenutoggle>
                <i class="toolbar-menu"></i>
            </button>
        </ion-buttons>
    </ion-toolbar>
</ion-header>
<ion-content style="background: #f5f5f5;" (ionScroll)="scrolling($event)">
    <div class="claim-list" *ngIf="claimList && claimList.length">
        <div class="claim-item" *ngFor="let year of claimList">
            <div class="claim-year" [ngClass]="{'fixed-year':year.isOpen&&year.isFixed}">
                <span>{{year.year}}年</span>
                <span class="chaim-icon chaim-icon-up" *ngIf="year.isOpen" (click)="itemUp(year)"></span>
                <span class="chaim-icon chaim-icon-down" *ngIf="!year.isOpen" (click)="itemDown(year)"></span>
            </div>
            <ng-container *ngIf="year.claims && year.claims.length && year.isOpen">
                <div class="claim-year-list" *ngFor="let item of year.claims;">
                    <div class="claim-year-item"
                         [ngClass]="{
                         'border-green':item.claimsStatus == 'A' || item.claimsStatus == 'E',
                         'border-red':item.claimsStatus == 'D'||item.claimsStatus == 'I',
                         'border-yellow':item.claimsStatus == 'T'||item.claimsStatus == 'P'
                         }" (click)="goToDetail(item.policyID)">
                        <div class="claim-title">
                            <span class="title-name">受理日期 {{item.acceptTime | dateTrans:'YYYY年MM月DD日'}}</span>
                            <span class="title-type"  [ngClass]="{
                         'title-green':item.claimsStatus == 'A' || item.claimsStatus == 'E',
                         'title-red':item.claimsStatus == 'D'||item.claimsStatus == 'I',
                         'title-yellow':item.claimsStatus == 'T'||item.claimsStatus == 'P'
                         }">{{item.claimsStatusCn}}</span>
                        </div>
                        <div class="claim-info">
                            <p>保单号码 <span>{{item.policyID}}</span></p>
                            <p>出险日期 <span>{{item.claimsTime | dateTrans:'YYYY/MM/DD'}}</span></p>
                            <p>出险客户 <span>{{item.name}}</span></p>
                            <p>理赔类型 <span>{{item.claimsType}}</span></p>
                            <p>申请金额 <span>{{item.premium}}</span></p>
                            <p *ngIf="item.claimsStatus == 'A' || item.claimsStatus == 'E'">赔付金额 <span>{{item.claimsSum}}</span></p>
                            <p class="claim-reason-type" *ngIf="item.claimsStatus == 'D' || item.claimsStatus == 'I'">{{item.claimsStatus == 'D'?'拒赔':'关闭'}}原因：</p>
                            <div class="claim-reason" *ngIf="item.claimsStatus == 'D' || item.claimsStatus == 'I'">{{item.reason || '无'}}</div>
                        </div>
                    </div>
                </div>
            </ng-container>
        </div>
    </div>
</ion-content>
